<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>      
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<c:forEach items="${bts}" var="bt">
		<button class="${bt.method}">${bt.menuName}</button>
	</c:forEach>
	<!-- <button class="layui-btn bt_add">添加</button>
	<button class="layui-btn layui-btn-warm bt_update">修改</button>
	<button class="layui-btn layui-btn-danger bt_delete">删除</button> -->
	<div class="demoTable" style="margin-top: 10px;">
		用户名：
		<div class="layui-inline">
			<input class="layui-input" name="username" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn search" data-type="reload">搜索</button>
		<button class="layui-btn reset layui-btn-primary" data-type="reset">重置</button>
	</div>
	<table id="demo" lay-filter="test"></table>
	<script type="text/javascript">
		layui.use(['table', 'form'], function() {
			var table = layui.table;
			var form = layui.form;
			var $ = layui.$;

			//第一个实例
			table.render({
				elem : '#demo',
				toolbar: true,
				url : '${ctx}/user/page' //数据接口
				,page : true //开启分页
				,cols : [ [ //表头
            	{type: 'checkbox', fixed: 'left'},            
				{
					field : 'id',
					title : 'ID',
					sort : true,
					width : 280,
					fixed : 'left'
				}, {
					field : 'username',
					title : '用户名'
				}, {
					field : 'headImg',
					title : '头像',
					templet : function (d){
						return "<img width='25px' src='${ctx}/common/getImage?name="+d.headImg+"'>";
					}
				}, {
					field : 'sex',
					title : '性别',
					sort : true
				}, {
					field : 'nickname',
					title : '昵称'
				}, {
					field : 'tel',
					title : '电话'
				}, {
					field : 'email',
					title : '邮箱',
					sort : true
				}, {
					field : 'status',
					title : '状态',
					sort : true,
					templet : function (d){
						if (d.status=="1") {
							return '<input type="checkbox" name="switch" value='+d.id+' lay-skin="switch" lay-filter="status" lay-text="正常|冻结" checked>';
						}else {
							return '<input type="checkbox" name="switch" value='+d.id+' lay-skin="switch" lay-filter="status" lay-text="正常|冻结">';
						}
					}
				}, {
					field : 'createTime',
					title : '创建时间',
					width : 180,
					sort : true
				}, {
					field : 'createUser',
					title : '创建者',
					sort : true
				} ] ]
			});
			
			//修改状态
			form.on('switch(status)', function(data){
			  	$.post('${ctx}/user/updateStatus', {"id" : data.value, "status" : data.elem.checked==true?1:-1}, function (){
			  		var msg = "用户已冻结";
			  		if (data.elem.checked) {
			  			msg = "用户已解冻";
			  		}
			  		layer.msg(msg, {icon: 1})
			  	})
			});  
			
			//添加
			$('.bt_add').click(function (){
				layer.open({
				      type: 2,
				      title: '添加',
				      shadeClose: true,
				      shade: false,
				      maxmin: true, //开启最大化最小化按钮
				      area: ['893px', '700px'],
				      content: '${ctx}/user/showAdd'
			    });
			})
			
			//修改
			$('.bt_update').click(function (){
				var checkStatus = table.checkStatus('demo');
				if (checkStatus.data.length==0) {
					layer.msg('至少选择一条数据', {icon: 2})
					return false;
				}
				
				if (checkStatus.data.length>1) {
					layer.msg('至多只能选择一条数据', {icon: 2})
					return false;
				}
				
				var data = $.param(checkStatus.data[0]);
				
				layer.open({
				      type: 2,
				      title: '修改',
				      shadeClose: true,
				      shade: false,
				      maxmin: true, //开启最大化最小化按钮
				      area: ['893px', '700px'],
				      content: '${ctx}/user/showUpdate?'+data
			    });
			})
			
			//删除
			$('.bt_delete').click(function (){
				var checkStatus = table.checkStatus('demo');
				if (checkStatus.data.length==0) {
					layer.msg('至少选择一条数据', {icon: 2})
					return false;
				}
				
				var ids = new Array();
				for (var i=0; i<checkStatus.data.length; i++) {
					ids.push(checkStatus.data[i].id);
				}
				
				layer.confirm('确定要删除该数据吗？', {icon: 3, title:'提示'}, function(index){
					$.ajax({
					    type: "POST",
					    url: '${ctx}/user/delete',
					    contentType : "application/json",
					    dataType: 'json',  
					    data: JSON.stringify(ids),  
					    success: function(e){
					    	if (e == "") {
								layui.table.reload("demo", {
									page: {
							            curr: 1 //重新从第 1 页开始
						          	}
								});
								layer.msg('删除成功', {icon: 1});		//调用父窗口中的layer来提示，这样关闭弹出窗后提示不会立马关闭
							} else {
								layer.msg('删除失败', {icon: 2});
							}
					    },  
					    error: function(res){
					    	layer.msg("未知异常", {icon: 2});
					    }  
					});
				})
			})
			
			//搜索
			$('.demoTable .search').click(function (){
				table.reload('demo', {
			        page: {
			            curr: 1 //重新从第 1 页开始
		          	}
		          	,where: {
		              	username: $('[name="username"]').val(),
		              	job : $('[name="job"]').val()
			        }
		        })
			})
			
			//重置
			$('.demoTable .reset').click(function (){
				$('[name="username"]').val("");
				$('[name="job"]').val("");
				$('.demoTable .search').click();
			})
			
		});
	</script>
</body>
</html>